<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程图DEMO</title>
<!--[if lt IE 9]>
<?import namespace="v" implementation="#default#VML" ?>
<![endif]-->
<link rel="stylesheet" type="text/css" href="default.css"/>
<link rel="stylesheet" type="text/css" href="../codebase/fonts/iconflow.css"/>
<link rel="stylesheet" type="text/css" href="../codebase/GooFlow.css"/>
<script type="text/javascript" src="data2.js"></script>
<script type="text/javascript" src="../plugin/jquery.min.js"></script>
<script type="text/javascript" src="../codebase/GooFunc.js"></script>
<script type="text/javascript" src="../plugin/json2.js"></script>
<script type="text/javascript" src="../plugin/printThis.js"></script>

<script type="text/javascript" src="../codebase/GooFlow.js"></script>
<script type="text/javascript" src="../codebase/GooFlow.color.js"></script>
    <script type="text/javascript" src="../codebase/GooFlow.export.js"></script>
<script type="text/javascript">
var property={
	toolBtns:["start round mix","end round","task","node","chat","state","plug","join","fork","complex mix"],
	haveHead:true,
	headLabel:true,
	headBtns:["new","open","save","undo","redo","reload","print"],//如果haveHead=true，则定义HEAD区的按钮
	haveTool:true,
    haveDashed:true,
	haveGroup:true,
	useOperStack:true
};
//取代setNodeRemarks方法，采用更灵活的注释配置
GooFlow.prototype.remarks.toolBtns={
        cursor:"选择指针",
        direct:"结点连线",
        dashed:"关联虚线",
        start:"入口结点",
        "end":"结束结点",
        "task":"任务结点",
        node:"自动结点",
        chat:"决策结点",
        state:"状态结点",
        plug:"附加插件",
        fork:"分支结点",
        "join":"联合结点",
        "complex":"复合结点",
        group:"组织划分框编辑开关"
};
GooFlow.prototype.remarks.headBtns={
    new:"新建流程",
    open:"打开流程",
    save:"保存结果",
    undo:"撤销",
    redo:"重做",
    reload:"刷新流程",
    print:"打印流程图"
};
GooFlow.prototype.remarks.extendRight="工作区向右扩展";
GooFlow.prototype.remarks.extendBottom="工作区向下扩展";
var demo;
//后台存储的工作流数据
var waterFlowData={};
//后台存储的节点数据，key为标签ID，value为节点json对象
var nodeData={};
$(document).ready(function(){
	demo=$.createGooFlow($("#demo"),property);
	//demo.setNodeRemarks(remark);
	loadWaterFlowData();
	//demo.reinitSize(1000,520);
	loadNodeData();
    demo.onItemRightClick=function(id,type){
        console.log("onItemRightClick: "+id+","+type);
        return true;//返回false可以阻止浏览器默认的右键菜单事件
    }
    demo.onItemDbClick=function(id,type){
        console.log("onItemDbClick: "+id+","+type);
        return true;//返回false可以阻止原组件自带的双击直接编辑事件
    }
    demo.onPrintClick=function(){
        demo.print(0.8);
    }
    demo.onBtnSaveClick=function(){
        console.log("保存工作流: " + JSON.stringify(demo.exportData()));
        alert('ajax工作流保存成功');
    }
    demo.onItemFocus=function(id,type){
        console.log("onItemFocus: "+id+","+type);
        if(type == 'task' || type == 'node'){
            $('#slideId').val(nodeData[id] ? nodeData[id].id : '');
            $('#slideElemId').val(id);
            var node = getNode(id);
            $('#slideNodeName').val(node ? node.name : '');
            $('#slideNodeType').val(node ? node.type : '');
            $('#slideJobType').val(nodeData[id] ? nodeData[id].jobType : '');
            $('#slideJob').val(nodeData[id] ? nodeData[id].jobId : '');
        } else {
        	$('#slideId').val('');
	        $('#slideElemId').val('');
	        $('#slideNodeName').val('');
	        $('#slideNodeType').val('');
	        $('#slideJobType').val('');
	        $('#slideJob').val('');
        }
        return true;
    }
    //保存节点设置
    $('#slideNodeSaveBtn').click(function(){
    	var id = $('#slideNodeId').val();
    	var elemId = $('#slideElemId').val();
    	var nodeName = $('#slideNodeName').val();
    	var nodeType = $('#slideNodeType').val();
    	var jobType = $('#slideJobType').val();
    	var jobId = $('#slideJob').val();
    	if(!elemId || !nodeName || !jobId){
    		alert('属性不能为空，请检查');
    		return;
    	}
    	var node = {
    		id: id,
    		elemId: elemId,
    		nodeName: nodeName,
    		nodeType: nodeType,
    		jobType: jobType,
    		jobId: jobId,
    		workFlowId: waterFlowData.id
    	};
    	console.log('ajax保存节点设置:' + JSON.stringify(node));
    	alert(' \'' + nodeName+"' 属性保存成功");
    });
});
var out;
var RIGHT_SLIDE_WIDTH = 250;
function Export(){
    document.getElementById("result").value=JSON.stringify(demo.exportData());
}
function ResetScale(){
    demo.resetScale( parseFloat(document.getElementById("scaleValue").value) );
}
window.onresize=function(){
    demo.reinitSize(window.innerWidth-15-RIGHT_SLIDE_WIDTH,window.innerHeight-30);
}
//ajax加载工作流数据
function loadWaterFlowData(){
	waterFlowData = {
		id: '1',
		params: jsondata
	};
	console.log('查询工作流数据');
	demo.loadData(waterFlowData.params);
}
//ajax加载节点数据
function loadNodeData(){
	var result = [
	  {
		id: '001',
		elemId: 'demo_node_9',
		elemName: '经理终审',
		jobType: 'r',
		jobId: '002',
		workFlowId: '1'
	  }
	];
	console.log('查询节点数据');
	if($.isEmptyObject(result)){
		return;
	}
	for(var i=0; i<result.length; i++){
		nodeData[result[i].elemId] = result[i];
	}
	console.log(JSON.stringify(nodeData));
}
//获取节点对象
function getNode(nodeId){
	if(!demo){
		return null;
	}
	var data = demo.exportData();
	if(!data||!data.nodes||!data.nodes[nodeId]){
		return null;
	}
	return data.nodes[nodeId];
}
</script>
</head>
<body>
<div id="demo" style="width:80%;height:540px;"></div>
<div style="width:18%;height:540px;border:solid 1px lightgray;position: absolute;top: 0;right: 0;">
	<div class="slide-head">属性栏</div>
	<div class="slide-body">
		<div class="slide-title-row">
			<div class="slide-title">节点元素编号</div>
			<div class="slide-title-text">
				<input id="slideElemId" type="text" readonly="readonly" value=""/>
				<input id="slideId" type="hidden" value=""/>
			</div>
		</div>
		<div class="slide-title-row">
			<div class="slide-title">节点名称</div>
			<div class="slide-title-text">
				<input id="slideNodeName" type="text" value=""/>
			</div>
		</div>
		<div class="slide-title-row">
			<div class="slide-title">节点类型</div>
			<div class="slide-title-text">
				<select id="slideNodeType">
					<option value=""></option>
					<option value="task">任务节点</option>
					<option value="node">控制节点</option>
				</select>
			</div>
		</div>
		<div class="slide-title-row">
			<div class="slide-title">任务类型</div>
			<div class="slide-title-text">
				<select id="slideJobType">
					<option value=""></option>
					<option value="r">R任务</option>
					<option value="sql">SQL任务</option>
				</select>
			</div>    
		</div>
		<div class="slide-title-row">
			<div class="slide-title">任务</div>
			<div class="slide-title-text">
				<select id="slideJob">
					<option value=""></option>
					<option value="001">居民总电量预测</option>
					<option value="002">行业电量预测</option>
				</select>
			</div>    
		</div>
		<div class="slide-btn">
			<input id="slideNodeSaveBtn" type="button" value="确定"/>
		</div>
	</div>  
</div>
请输入缩放值：<input type="text" id="scaleValue" value="0.5"/>
<input id="scale" type="button" value='缩放' onclick="ResetScale()"/>
<input id="submit" type="button" value='导出结果' onclick="Export()"/>
<input id="submit" type="button" value='清空' onclick="demo.clearData()"/>
<textarea id="result" row="6"></textarea>
</body>
</html>
